<template>
    <div id="Financial_Top">
        <div>
            <div>
                <!--        面包屑-->
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>提现记录</el-breadcrumb-item>
                </el-breadcrumb>
                <!--        面包屑 end-->
                <!--        内容-->
                <el-card>
                    <el-form ref="form" :model="searchForm" label-width="80px" :inline="true" size="small"
                             class="admin_from">
                        <el-form-item label=""
                                      :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                            <el-input v-model="searchForm.user_id" placeholder="请输入用户ID"></el-input>
                        </el-form-item>
                        <el-form-item label=""
                                      :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                            <el-input v-model="searchForm.nickname" placeholder="请输入用户昵称"></el-input>
                        </el-form-item>
                        <el-form-item label=""
                                      :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                            <el-input v-model="searchForm.name" placeholder="请输入用户姓名"></el-input>
                        </el-form-item>
                        <el-form-item label=""
                                      :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                            <el-select v-model="searchForm.type" placeholder="请选择提现方式" clearable
                                       :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                                <el-option label="微信" value="1"></el-option>
                                <el-option label="支付宝" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label=""
                                      :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                            <el-select v-model="searchForm.status" placeholder="请选择状态" clearable
                                       :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                                <el-option label="待处理" value="0"></el-option>
                                <el-option label="同意" value="1"></el-option>
                                <el-option label="拒绝" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <el-form ref="form" :model="searchForm" label-width="80px" :inline="true" size="small"
                             class="admin_from">
                        <el-form-item label=""
                                      :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                            <el-input v-model="searchForm.min_money" placeholder="请输入最小金额"></el-input>
                        </el-form-item>
                        <el-form-item label=""
                                      :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                            <el-input v-model="searchForm.max_money" placeholder="请输入最大金额"></el-input>
                        </el-form-item>
                        <el-form-item label="">
                            <el-col :span="11">
                                <el-form-item prop="date1">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.start_time"
                                                    value-format="yyyy-MM-dd"
                                                    style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col class="line" :span="1">-</el-col>
                            <el-col :span="11">
                                <el-form-item prop="date1">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.end_time"
                                                    value-format="yyyy-MM-dd"
                                                    style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="small" @click="search">查询</el-button>
                            <el-button type="primary" size="small" @click="derive">导出</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table
                            :data="tableData"
                            border
                            style="width: 100%">
                        <el-table-column
                                type="index"
                                label="#">
                        </el-table-column>
                        <el-table-column
                                prop="created_at"
                                label="日期">
                        </el-table-column>
                        <el-table-column
                                prop="trade_no"
                                label="订单号"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                width="200"
                                label="用户信息">
                            <template slot-scope="scope">
                                <div class="img">
                                    <img :src="scope.row.userInfo.avatar" alt="" width="30" height="30">
                                    <div>
                                        <p>{{scope.row.userInfo.id}}</p>
                                        <p>{{scope.row.userInfo.nickname}}</p>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                                width="150"
                                label="账户信息">
                            <template slot-scope="scope">
                                <div class="img">
                                    <div>
                                        <p>账户：{{scope.row.account}}</p>
                                        <p>姓名：{{scope.row.name}}</p>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="money"
                                label="提现金额">
                        </el-table-column>
                        <el-table-column
                                prop="coin"
                                label="所需金币">
                        </el-table-column>
                        <el-table-column
                                label="提现方式">
                            <template slot-scope="scope">
                                <span v-if="scope.row.type==1">微信</span>
                                <span v-if="scope.row.type==2">支付宝</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                width="120"
                                label="提现状态">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.status==1">已提现</el-tag>
                                <el-tag type="warning" v-if="scope.row.status==0">提现中</el-tag>
                                <el-tag type="danger" v-if="scope.row.status==2">已拒绝提现</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="isover"
                                label="操作"
                                width="230">
                            <template slot-scope="scope">
                                <el-button type="primary" plain size="small" @click="consent(scope.row.id)"
                                           v-if="scope.row.status!='1'">同意提现
                                </el-button>
                                <el-button type="primary" plain size="small" @click="anew(scope.row.id)"
                                           v-if="scope.row.status=='1'">重审
                                </el-button>
                                <el-button type="danger" plain size="small" @click="refuse(scope.row.id)">拒绝提现
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="el-pagination">
                        <el-pagination
                                background
                                @size-change="changeSize"
                                @current-change="changeCurrent"
                                :current-page="params.pagenum"
                                :page-sizes="[10, 20, 30, 40]"
                                :page-size="params.pagesize"
                                :layout="this.$store.state.paginationLayout"
                                :total="params.totals">
                        </el-pagination>
                    </div>

                </el-card>
                <el-dialog title="重审" width="50%" :visible.sync="visible">
                    <el-row :gutter="20">
                        <el-col :span="15">
                            <el-form ref="form" label-width="150px" size="small">
                                <el-form-item label="重审说明">
                                    <el-input v-model="form.remark"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                    <span slot="footer" class="dialog-footer">
                <el-button @click="visible=false" size="small">取 消</el-button>
                <el-button type="primary" @click="dialogAffirm" size="small">确 定</el-button></span>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Financial_Top",
        data() {
            return {
                params: {
                    pagenum: 1,
                    pagesize: 10,
                    totals: 0,
                },
                form: {
                    remark: '',
                },
                tableData: [],
                fromTitle: '',
                visible: false,
                imageUrl: '',
                searchForm: {
                    user_id: '',
                    nickname: '',
                    status: '',
                    type: '',
                    name: '',
                    start_time: '',
                    end_time: '',
                    min_money: '',
                    max_money: '',
                },
                id: '',
            }
        },
        created() {
            this.getList()
        },
        methods: {
            getList() {
                let data = {
                    page: this.params.pagenum,
                    page_size: this.params.pagesize,
                    user_id: this.searchForm.user_id,
                    nickname: this.searchForm.nickname,
                    status: this.searchForm.status,
                    type: this.searchForm.type,
                    name: this.searchForm.name,
                    start_time: this.searchForm.start_time,
                    end_time: this.searchForm.end_time,
                    min_money: this.searchForm.min_money,
                    max_money: this.searchForm.max_money,
                };
                this.$axios.post("admin/withdraw/index", data).then((res) => {
                    this.params.totals = res.data.count;
                    this.tableData = res.data.list;
                });
            },
            // 每页显示多少条
            changeSize(val) {
                this.params.pagesize = val;
                this.getList();
            },
            // 当前显示的页数
            changeCurrent(val) {
                this.params.pagenum = val;
                this.getList()
            },
            consent(id) {
                this.deposit(id, 1)
            },
            refuse(id) {
                this.deposit(id, 2)
            },
            deposit(id, status) {
                this.$confirm('确定要进行操作, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post("admin/withdraw/setWithStatus", {id: id, status: status}).then((res) => {
                        this.$message.success('成功!');
                        this.getList()
                    });
                }).catch(() => {

                });
            },
            search() {
                this.params.pagenum = 1;
                this.getList();
            },
            anew(id) {
                this.visible = true;
                this.id = id;
            },
            dialogAffirm() {
                this.$axios.post("admin/withdraw/reback", {id: this.id, remark: this.form.remark}).then((res) => {
                    this.$message.success('成功!');
                    this.visible = false;
                    this.getList()
                });
            },
            derive() {
                let parameter =
                    "?user_id=" + this.searchForm.user_id +
                    '&nickname=' + this.searchForm.nickname +
                    '&status=' + this.searchForm.status +
                    '&type=' + this.searchForm.type +
                    '&name=' + this.searchForm.name +
                    '&start_time=' + this.searchForm.start_time +
                    '&end_time=' + this.searchForm.end_time +
                    '&min_money=' + this.searchForm.min_money +
                    '&max_money=' + this.searchForm.max_money +
                    "&access_token=" + sessionStorage.getItem("token");
                let url = this.fixedIp + 'admin/withdraw/export' + parameter;
                window.open(url, '_self');
            }
        }
    }
</script>

<style scoped>

</style>